<template>
	<view id="user">
		<HeaderC txt="用户中心"></HeaderC>
		<view-tabbar :current="4" v-if="isTabar"></view-tabbar>
		<uni-popup ref="popup" type="bottom" background-color="#FFFFFF" class="dislog">
			<view   v-bind:class="{'tit':true, 'tit2':!isWx}">
				<view class="content">
					<view class="logMsg" v-for="(item,index) in listCoupon" :key="index">
						<div class="logimg">
						  <div class="logimg-tit logimg-tit1">¥ <span class="logimg-tit2">{{item.tit}}</span></div>
						  <div class="logimg-tit logimg-tit3">满{{item.content}}可用</div>
						</div>
						<div class="logContent">
						  <div class="logContent-tit logContent-tit1">{{item.text}}</div>
						  <div class="logContent-tit">{{listCouponTime}}</div>
						</div> 	
					</view>
				</view>
				<view class="close" @click="msgClose">
				</view>
			</view>
		</uni-popup>
		<view class="top-c">
			<view class="top-b">
				<view class="top">
					<image src="" mode="aspectFit" class="img" v-if="!isLogin"></image>
					<image src="" mode="aspectFit" class="img" v-if="isLogin"></image>
					<text v-if="isLogin" class="info info3">{{userInfo.mobile}}</text>
					<view class="info" v-if="!isLogin&&isWx==true" @click="goLogin">
						<text class="">登录/注册</text><br>
						<text class="info2">
							点击登录，使用代理
						</text>
					</view>	
					<view class="info" v-if="!isLogin&&isWx==false" @click="goPage3('loginwx/loginwx')">
						<text class="">登录/注册</text><br>
						<text class="info2">
							点击登录，使用代理
						</text>
					</view>	
					<view class="msg" @click="goPage2('user/message')">
						<image src="" mode="aspectFit"></image>
						<text class="text">消息</text>
						<text class="cirtle_red" v-if="isRed&&isLogin"></text>
					</view>
				</view>
				<view class="rowDiv"  v-if="!isLogin&&isWx==true">
					<view class="item item1" @click="goPage('login/login')">
						<view class="title">我的订单</view>
						<view class="num">查看</view>
					</view>
					<view class="item item2" @click="goPage('login/login')">
						<view class="title">我的钱包</view>
						<view class="num">***元</view>
					</view>
				</view>
				<view class="rowDiv"  v-if="!isLogin&&isWx==false">
					<view class="item item1" @click="goPage3('loginwx/loginwx')">
						<view class="title">我的订单</view>
						<view class="num">查看</view>
					</view>
					<view class="item item2" @click="goPage3('loginwx/loginwx')">
						<view class="title">我的钱包</view>
						<view class="num">***元</view>
					</view>
				</view>
				<view class="rowDiv"  v-if="isLogin" >
					<view class="item item1" @click="goPage2('user/orderList')">
						<view class="title">我的订单</view>
						<view class="num">查看</view>
					</view>
					<view class="item item2" @click="goPage2('user/wallet')">
						<view class="title">我的钱包</view>
						<view class="num">{{nmoney}}元</view>
					</view>
				</view>
			</view>		
		</view>
		<!-- 改版 -->
		<!-- 未登录 -->
		<view class="part" v-if="!isLogin&&isWx==true" @click="goPage('login/login')">
			<view class="item " >
				个人认证
				<text class="one" @click="goPage('login/login')">企业
					<text>未完成</text>
				</text>
				<text class="two" @click="goPage('login/login')">个人
					<text>未完成、</text>
				</text>
				<view class="icon">					
				</view>
			</view>
		</view>
		<view class="part" v-if="!isLogin"  @click="goPage('login/login')">
			<view class="item item1">
				积分乐园
				<view class="icon">					
				</view>
			</view>
			<view class="item item1">
				优惠劵
				<view class="icon">					
				</view>
			</view>
			<view class="item item1" >
				发票管理
				<view class="icon">					
				</view>
			</view>
			<view class="item item1" >
				白名单
				<view class="icon">					
				</view>
			</view>
			<view class="item" >
				密匙
				<view class="icon">					
				</view>
			</view>
		</view>
		<view class="part" v-if="!isLogin"  @click="goPage('login/login')">
			<view class="item item1">
				代理定制
				<view class="icon">					
				</view>
			</view>
			<view class="item item1">
				邀请好友
				<view class="icon">					
				</view>
			</view>
			<view class="item" >
				设置
				<view class="icon">					
				</view>
			</view>
		</view>
		<!-- 登录 -->
		<view class="part " v-if="isLogin&&isWx==true">		
			<view class="item" v-if="(cert.status == 0 && certThree.status == 1)&& certCom.status != 1" @click="goPage('user/certificationReviewTian')">
				个人认证
				<text class="one">企业
					<text v-if="certCom.status == 0">未完成</text>
					<text v-if="certCom.status == 1">未完成</text>
					<text v-if="certCom.status == 2">已完成</text>
					<text v-if="certCom.status == 3">未认证</text>
				</text>
				<text class="two" >个人
					<text v-if="cert.status == 0">未完成、</text>
					<text v-if="cert.status == 1">完成、</text>
				</text>
				<view class="icon">					
				</view>
			</view>
			<view class="item" v-if="cert.status == 1 && certCom.status == 0" @click="goPage2('user/certIput')">
				个人认证
				<text class="one">企业
					<text v-if="certCom.status == 0">未完成</text>
					<text v-if="certCom.status == 1">未完成</text>
					<text v-if="certCom.status == 2">已完成</text>
					<text v-if="certCom.status == 3">未认证</text>
				</text>
				<text class="two" >个人
					<text v-if="cert.status == 0">未完成、</text>
					<text v-if="cert.status == 1">完成、</text>
				</text>
				<view class="icon">					
				</view>
			</view>
			<view class="item" v-if="cert.status == 0 &&certCom.status == 1&& certCom.workflow!=1&&certCom.type == 2" @click="goPage('user/certOngoing')">
				个人认证
				<text class="one">企业
					<text v-if="certCom.status == 0">未完成</text>
					<text v-if="certCom.status == 1">未完成</text>
					<text v-if="certCom.status == 2">已完成</text>
					<text v-if="certCom.status == 3">未认证</text>
				</text>
				<text class="two" >个人
					<text v-if="cert.status == 0">未完成、</text>
					<text v-if="cert.status == 1">完成、</text>
				</text>
				<view class="icon">					
				</view>
			</view>
			<view class="item" v-if="cert.status == 1 &&certCom.status == 1&& certCom.workflow!=1&&certCom.type == 2" @click="goPage('user/certOngoing')">
				个人认证
				<text class="one">企业
					<text v-if="certCom.status == 0">未完成</text>
					<text v-if="certCom.status == 1">未完成</text>
					<text v-if="certCom.status == 2">已完成</text>
					<text v-if="certCom.status == 3">未认证</text>
				</text>
				<text class="two" >个人
					<text v-if="cert.status == 0">未完成、</text>
					<text v-if="cert.status == 1">完成、</text>
				</text>
				<view class="icon">					
				</view>
			</view>
			<view class="item" v-if="cert.status == 0 &&certCom.status == 2" @click="goPage2('user/certIput')">
				个人认证
				<text class="one">企业
					<text v-if="certCom.status == 0">未完成</text>
					<text v-if="certCom.status == 1">未完成</text>
					<text v-if="certCom.status == 2">已完成</text>
					<text v-if="certCom.status == 3">未认证</text>
				</text>
				<text class="two" >个人
					<text v-if="cert.status == 0">未完成、</text>
					<text v-if="cert.status == 1">完成、</text>
				</text>
				<view class="icon">					
				</view>
			</view>
			<view class="item" v-if="cert.status == 1 &&certCom.status == 2" @click="goPage2('user/certIput')">
				个人认证
				<text class="one">企业
					<text v-if="certCom.status == 0">未完成</text>
					<text v-if="certCom.status == 1">未完成</text>
					<text v-if="certCom.status == 2">已完成</text>
					<text v-if="certCom.status == 3">未认证</text>
				</text>
				<text class="two" >个人
					<text v-if="cert.status == 0">未完成、</text>
					<text v-if="cert.status == 1">完成、</text>
				</text>
				<view class="icon">					
				</view>
			</view>
			<view class="item" v-if="cert.status == 0 && certCom.status == 0" @click="goPage2('user/certIput')">
				个人认证
				<text class="one">企业
					<text v-if="certCom.status == 0">未完成</text>
					<text v-if="certCom.status == 1">未完成</text>
					<text v-if="certCom.status == 2">已完成</text>
				</text>
				<text class="two" >个人
					<text v-if="cert.status == 0">未完成、</text>
					<text v-if="cert.status == 1">完成、</text>
				</text>
				<view class="icon">					
				</view>
			</view>
			<view class="item" v-if="certCom.status == 3" @click="goPage2('user/certIput')">
				个人认证
				<text class="one">企业
					<text v-if="certCom.status == 0">未完成</text>
					<text v-if="certCom.status == 1">未完成</text>
					<text v-if="certCom.status == 2">已完成</text>
					<text v-if="certCom.status == 3">未认证</text>
				</text>
				<text class="two" >个人
					<text v-if="cert.status == 0">未完成、</text>
					<text v-if="cert.status == 1">完成、</text>
				</text>
				<view class="icon">					
				</view>
			</view>
			<view class="item" v-if="certCom.status == 1 && certCom.type==1&& certCom.workflow !=3" @click="goPage('user/certOngoing')">
				个人认证
				<text class="one">企业
					<text v-if="certCom.status == 0">未完成</text>
					<text v-if="certCom.status == 1">未完成</text>
					<text v-if="certCom.status == 2">已完成</text>
					<text v-if="certCom.status == 3">未认证</text>
				</text>
				<text class="two" >个人
					<text v-if="cert.status == 0">未完成、</text>
					<text v-if="cert.status == 1">完成、</text>
				</text>
				<view class="icon">					
				</view>
			</view>
			<view class="item" v-if="certCom.status == 1 && certCom.type==1&& certCom.workflow ==3" @click="goPage('user/certificationMoney')">
				个人认证
				<text class="one">企业
					<text v-if="certCom.status == 0">未完成</text>
					<text v-if="certCom.status == 1">未完成</text>
					<text v-if="certCom.status == 2">已完成</text>
					<text v-if="certCom.status == 3">未认证</text>
				</text>
				<text class="two" >个人
					<text v-if="cert.status == 0">未完成、</text>
					<text v-if="cert.status == 1">完成、</text>
				</text>
				<view class="icon">					
				</view>
			</view>
			<view class="item" v-if="certCom.status == 1&& certCom.type==2&& certCom.workflow==1" @click="goPage2('user/certificationMoneyS')">
				个人认证
				<text class="one">企业
					<text v-if="certCom.status == 0">未完成</text>
					<text v-if="certCom.status == 1">未完成</text>
					<text v-if="certCom.status == 2">已完成</text>
					<text v-if="certCom.status == 3">未认证</text>
				</text>
				<text class="two" >个人
					<text v-if="cert.status == 0">未完成、</text>
					<text v-if="cert.status == 1">完成、</text>
				</text>
				<view class="icon">					
				</view>
			</view>
		</view>
		<view class="part" v-if="isLogin">
			<view class="item item1" @click="goPage2('active/integral')">
				积分乐园
				<view class="icon">					
				</view>
			</view>
			<view class="item item1" @click="goPage2('user/coupon')">
				优惠劵
				<view class="icon">					
				</view>
			</view>
			<!-- <view class="item item1" @click="goPage2('user/invoice')">
				发票管理
				<view class="icon">					
				</view>
			</view> -->
			<view class="item item1" @click="goPage2('user/whiteList')">
				白名单
				<view class="icon">					
				</view>
			</view>
			<view class="item" @click="goPage2('user/secret')">
				密匙
				<view class="icon">					
				</view>
			</view>
		</view>
		<view class="part" v-if="isLogin" >
			<view class="item item1" @click="goPage2('user/customIp')">
				代理定制
				<view class="icon">					
				</view>
			</view>
			<view class="item item1" @click="goPage2('user/invite')">
				邀请好友
				<view class="icon">					
				</view>
			</view>
			<view class="item" @click="goPage3('tool/tool')">
				设置
				<view class="icon">					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cert: {
				    status: "",
				},
				certCom: {
				    status: "",
				},
				certThree:{
					status: "",
				},
				isRed:true,
				isTop:true,
				isalip:true,
				isWx:true,
				isTabar:false,
				listCouponTime:'',
				      listCoupon:[
				        {
				          tit:'1',
				          text:'限按量订单使用',
				          time:"2021",
				          content:'3'
				        },
				        {
				          tit:'4',
				          text:'限按量订单使用',
				          time:"2021",
				          content:'9'
				        },
				        {
				          tit:'10',
				          text:'限不限量(个人)使用',
				          time:"2021",
				          content:'29'
				        },
				        {
				          tit:'20',
				          text:'限不限量(企业)使用',
				          time:"2021",
				          content:'59'
				        },
				        {
				          tit:'20',
				          text:'限长效订单使用',
				          time:"2021",
				          content:'99'
				        },
				        {
				          tit:'2',
				          text:'限全局订单使用',
				          time:"2021",
				          content:'10'
				        },
				        {
				          tit:'20',
				          text:'限全局订单使用',
				          time:"2021",
				          content:'90'
				        },
				        {
				          tit:'20',
				          text:'限加速器标准版使用',
				          time:"2021",
				          content:'90'
				        },
				        {
				          tit:'50',
				          text:'限加速器包机版使用',
				          time:"2021",
				          content:'210'
				        },
				      ],
			};
		},
		computed:{
			userInfo() {
			      return this.$store.state.userInfo;
			},
			isLogin(){
				 return this.$store.state.isLogin;
			},
			nmoney() {
			      return this.$store.state.leftMoney;
			},
		},
		onShow() {
			this.getUserCertOk();
			this.getUserInfo();
			this.BusinessCetifyGet();
			this.getPersonalCertify();
			this.getMoney();
			this.msgList();
			this.businessCetifyGet()
			setTimeout(function() {
				console.log(1,this.certCom,this.certThree);
			}, 1000);
			// #ifdef MP-WEIXIN
				this.isWx=false
				uni.hideTabBar({
					animation: false
				})
				this.isTabar=true
			// #endif
			// #ifdef MP-BAIDU
				this.isTop=false
			// #endif
			// #ifdef MP-ALIPAY
			// #endif
			// this.down()
		},
		methods: {
			msgClose(){
				this.$refs.popup.close()
				uni.removeStorageSync("isresMsg")
			},
			AddDays(){
			      let nd = new Date();
			      nd = nd.valueOf();
			      nd = nd + 7 * 24 * 60 * 60 * 1000;
			      nd = new Date(nd);
			      let y = nd.getFullYear();
			      let m = nd.getMonth()+1;
			      let d = nd.getDate();
			      let h = nd.getHours()
			      let s = nd.getMinutes()
			      if(m <= 9) m = "0"+m;
			      if(d <= 9) d = "0"+d; 
			      let cdate = y+"-"+m+"-"+d+" "+h+":"+s;
			      return cdate;
			},
			down(){
				if(uni.getStorageSync("isresMsg")){
					if(this.isWx){
						this.$refs.popup.open('bottom')
					}else{
						this.$refs.popup.open('top')
					}
				}
				this.listCouponTime=this.AddDays()
				setTimeout(function() {
				  	uni.removeStorageSync("isresMsg")
				}, 1000);
			},
			BusinessCetifyGet(){
				let that = this;
				this.$store
				  .dispatch("BusinessCetifyGet")
				  .then((response) => {
					let data = response.data;
					if (typeof data.obj == "undefined" || typeof data.obj.status == "undefined") {
						this.certCom.status = 3;
						console.log(3333,this.certCom.status);
					} else {
					    that.certCom = data.obj;
						console.log(1111,that.certCom);
					}
				  })
				  .catch(() => {});
			},
			msgList(){
				let that = this;
				this.$store
				  .dispatch("MessageList2")
				  .then((response) => {
					if(response.data.code==0){
						if(response.data.obj=="暂无信息"){
							this.isRed=false
						}else{
							this.isRed=true
						}					
					}
				  })
				  .catch(() => {});
			},
			goLogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			getUserCertOk() {
			      let that = this;
			      this.$store
			        .dispatch("GetCertOk")
			        .then((response) => {
			          that.cert.status = response.data.obj.status;
			        })
			        .catch(() => {});
			},
			getMoney(){
				let that = this;
				this.$store
				  .dispatch("GetMoney")
				  .then((response) => {										
				    // that.cert.status = response.data.obj.status;
				  })
				  .catch(() => {});
			},
			getUserInfo() {
				      let that = this;
				      this.$store
				        .dispatch("GetInfo")
				        .then((response) => {	
				          // that.cert.status = response.data.obj.status;
						  if(response){
							console.log("登录"); 
							if(uni.getStorageSync("isresMsg")){
							  	that.down()
								setTimeout(function() {
								  	uni.removeStorageSync("isresMsg")
								}, 1000);
							}
						  }else{
							console.log("未登录");   
						  }
						})	 
						  
				        .catch(() => {});
				},
			goPage(e){
				uni.navigateTo({
					url: `/pages/${e}`
				})
			},
			goPage2(e){
				uni.navigateTo({
					url: `/pagesA/${e}`
				})
			},
			goPage3(e){
				uni.navigateTo({
					url: `/pagesB/${e}`
				})
			},
			businessCetifyGet(){
				let that = this;
				this.$store
				  .dispatch("BusinessCetifyGet")
				  .then((response) => {	
				  })
				  .catch(() => {});
			},
			getPersonalCertify(){
				let that = this;
				this.$store
				  .dispatch("GetPersonalCertify")
				  .then((response) => {
					if(response.data.code==0){
						if (
						    typeof response.data.obj == "null" ||
						    typeof response.data.obj == "undefined" ||
						    typeof response.data.obj.status == "undefined"
						) {
						    that.certThree.status = 3;
						} else {
						    that.certThree.status = response.data.obj.status;
							
						}	
						console.log(that.certThree.status);
					}
				  })
				  .catch(() => {});
			}			
		},
	}
</script>

<style lang="less" scoped>
	#user{
		background-color: #f6f8fa;
		padding-bottom: 200rpx;
		overflow: hidden;
		.uni-popup__wrapper-box{
			width: 80%;
			height: 500rpx;
			.tit{
				height: 700rpx;
				padding-top: 240rpx;
				margin-bottom: 30%;
				background:url('https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/youdilog.png') no-repeat center center;	
				background-size: 100% 100%;
				position: relative;
			}
			
			.content{
				width: 80%;
				max-height: 660rpx;
				margin: 0 auto;
				text-align: left;
				position: relative;
				// margin-bottom: 100rpx;
				overflow-x: hidden;
				overflow-y: scroll !important;
			}
			.tit2{
				margin-bottom: 36%;
			}
			.logMsg{
				width: 96%;
				height: 200rpx;
				margin: 0 auto;
				margin-bottom: 10px;
				background: url("https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/youdilog2.png") no-repeat;
				background-size: 100% 100%;        
			}
			.logimg{
			  width: 38%;
			  height: 100%;
			  float: left;
			}
			.logimg-tit{
			  text-align: center;
			  width: 100%;
			  height: 36%;
			  font-size: 36rpx;
			  font-family: Microsoft YaHei;
			  font-weight: 400;
			  color: #FA3320;
			}
			.logimg-tit1{
			  height: 64%;
			  line-height: 128rpx;
			}
			.logimg-tit2{
			  font-size: 72rpx;
			  font-weight: 600;
			  margin-left: 6rpx;
			}
			.logimg-tit3{
			  font-size: 24rpx;
			  color: #EB6100;
			}
			.logContent{
			  width: 55%;
			  height: 100%;
			  float: right;
			  padding-left: 20rpx;
			}
			.logContent-tit{
			  height: 50%;
			  line-height: 100rpx;
			  font-size: 24rpx;
			  font-family: Microsoft YaHei;
			  font-weight: 400;
			  color: #9E480B ;
			}
			.logContent-tit1{
			  font-size: 24rpx;
			  height: 48%;
			}
			.close{
				width: 60rpx;
				height: 60rpx;
				margin: 60rpx auto;
				background: url("https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/youdilog3.png") no-repeat center center;
				background-size: 60rpx 60rpx;  
				position: relative;
			}
		}
		.top-c{
			background: url('https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E6%88%91%E7%9A%84%E9%A1%B5%E9%9D%A2%E8%83%8C%E6%99%AF%E5%A4%B4.png') no-repeat center -1600rpx;
			padding: 10rpx 0 0rpx;
		}
		.top-b{
			width: 92%;
			margin: 0 auto;
			overflow: hidden;
			box-sizing:border-box;
			// padding-top: 20rpx;
		}
		.part{
			width: 92%;
			margin: 30rpx auto 40rpx;
			.item{
				width: 100%;
				height: 100rpx;
				background: #FFFFFF;
				line-height: 100rpx;
				box-sizing: border-box;
				padding: 0 30rpx;
				font-size: 28rpx;
				position: relative;
			}
			.item1{
				border-bottom: 2rpx solid #f2f2f2;
			}
			.one{
				font-size: 28rpx;
				position: absolute;
				right: 54rpx;
				top: 0;
			}
			.two{
				font-size: 28rpx;
				position: absolute;
				top: 0;
				right: 194rpx;
			}
			.icon{
				width: 0;
				height: 0;
				border-top: 4px solid transparent;
				border-left: 4px solid #BCBCBC;
				border-bottom: 4px solid transparent;				
				position: absolute;
				top:40rpx;
				right: 30rpx;
				
			}
		}
		.rowDiv{
			overflow: hidden;
			margin: 60rpx 0 8rpx;		
			.item{
				height: 175rpx;
				border-radius: 14rpx;
				float: left;
				width: 48%;
				.title {
				    font-size: 28rpx;
				    color: #fff;
				    padding: 38rpx 0 0 28rpx;
				}
				.num {
				    font-size: 24rpx;
				    color: #d2d7f2;
				    padding: 9.6rpx 0 0 28rpx;
				}
				&.item2 {
				    float: right;
				    background: url() no-repeat 96% 6%;
				    background-size: 134rpx;
				    .num {
				        color: #fff;
				    }
				}
			}
			&.item1 {
			    margin-left: 0.3rem;
			    background-size: 0.4rem;
			}
		
			.item:nth-child(1) {
			    background-color: #5e6fac;
			      }
			.item:nth-child(2) {
			    background-color: #4078ef;
			      }
		}
		.user{
			padding-left: 30rpx;
			padding-right: 30rpx;
			background-color: #f6f8fa;
		}
		.top{
			overflow: hidden;
			line-height: 84rpx;
			position: relative;
			top: 20rpx;
			.msg{
				float: right;
				margin-top: 46rpx;
			}
		}
		.info{
			float: left;
			height: 90rpx;
			margin-left: 42rpx;
			margin-top: 30rpx;
			font-size: 40rpx;
			font-weight: bold;
			color: #222;
			line-height: 40rpx;
		}
		.info2{
			font-size: 22rpx;
		    font-weight: normal;
		    color: #52596b;	
		}
		.info3{
			margin-top: 50rpx;
		}
		.img{
			float: left;
			width: 140rpx;
			height: 140rpx;
		}
		.msg{
			background-color: #d0d3df;
			width: 115rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			margin-top: 18rpx;
			border-radius: 100rpx;
			font-size: 28rpx;
			overflow: hidden;
			position: relative;
			image{
				width: 24rpx;
				height: 30rpx;
				float: left;
				margin-top: 9rpx;
				margin-left: 14rpx;
			}
			.text{
				color: rgb(82, 89, 107);
			}
			.cirtle_red{
				display: inline-block;
				width: 12rpx;
				height: 12rpx;
				background: #f85651;
				border-radius: 50%;
				position: absolute;
				right:10rpx;
				top:2rpx;
				border-radius: 50%;
			}
		}
	}	
</style>
<style>
	.uni-list--border-top[data-v-34219f38]{
	    position: absolute;
	    top: 0;
	    right: 0;
	    left: 0;
	    height: 10rpx !important;
	    -webkit-transform: scaleY(0.5);
	    transform: scaleY(0.5);
	    background-color: #c8c7cc;
	    z-index: 1;
	}	
</style>